---
id: 641da5462576784453146ec2
title: Schritt 7
challengeType: 0
dashedName: step-7
---

# --description--

Nun, da du die gewünschten Daten hast, kannst du diese verwenden, um die Benutzeroberfläche zu füllen. Die abgerufenen Daten enthalten jedoch ein Array von 26 Autoren, und wenn du sie alle gleichzeitig zur Seite hinzufügst, kann dies zu Leistungsverlusten führen.

Stattdessen solltest du 8 Autoren gleichzeitig hinzufügen und über einen Button verfügen mit dem du weitere 8 Autoren hinzufügen kannst, bis keine Daten mehr angezeigt werden können.

Verwende `let`, um 2 Variablen mit dem Namen `startingIndex` und `endingIndex` zu erstellen, und weise ihnen die Zahlenwerte `0` bzw. `8` zu. Erstelle außerdem eine `authorDataArr`-Variable mit `let` und setze sie auf ein leeres Array.

# --hints--

Du solltest `let` verwenden, um eine Variable mit dem Namen `startingIndex` zu deklarieren.

```js
assert.match(code, /let\s+startingIndex/)
```

Du solltest deine `startingIndex`-Variable auf `0` setzen.

```js
assert.match(code, /let\s+startingIndex\s*=\s*0\s*;?/)
```

Du solltest `let` verwenden, um eine Variable mit dem Namen `endingIndex` zu deklarieren.

```js
assert.match(code, /let\s+endingIndex/)
```

Du solltest deine `endingIndex`-Variable auf `8` setzen.

```js
assert.match(code, /let\s+endingIndex\s*=\s*8\s*;?/)
```

Du solltest `let` verwenden, um eine Variable mit dem Namen `authorDataArr` zu deklarieren.

```js
assert.match(code, /let\s+authorDataArr/)
```

Du solltest deine `authorDataArr`-Variable auf ein leeres Array (`[]`) setzen.

```js
assert.match(code, /let\s+authorDataArr\s*=\s*\[\s*\]\s*;?/)
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freeCodeCamp News Author Page</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1 class="title">freeCodeCamp News Author Page</h1>

    <main>
      <div id="author-container"></div>
      <button class="btn" id="load-more-btn">Load More Authors</button>
    </main>

    <script src="./script.js"></script>
  </body>
</html>
```

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-bg-color: #1b1b32;
  --light-grey: #f5f6f7;
  --dark-purple: #5a01a7;
  --golden-yellow: #feac32;
}

body {
  background-color: var(--main-bg-color);
  text-align: center;
}

.title {
  color: var(--light-grey);
  margin: 20px 0;
}

#author-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.user-card {
  border-radius: 15px;
  width: 300px;
  height: 350px;
  background-color: var(--light-grey);
  margin: 20px;
}

.user-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.purple-divider {
  background-color: var(--dark-purple);
  width: 100%;
  height: 15px;
}

.author-name {
  margin: 10px;
}

.bio {
  margin: 20px;
}

.error-msg {
  color: var(--light-grey);
}

.btn {
  cursor: pointer;
  width: 200px;
  margin: 10px;
  color: var(--main-bg-color);
  font-size: 14px;
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}
```

```js
const authorContainer = document.getElementById('author-container');
const loadMoreBtn = document.getElementById('load-more-btn');

--fcc-editable-region--

--fcc-editable-region--

fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
  .then((res) => res.json())
  .then((data) => {
    console.log(data);   
  })
  .catch((err) => {
    console.error(`There was an error: ${err}`);
  });
```
